<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      /*
        数组方法：
          push 往数组后面追加元素
          pop 删除数组最后一项元素
          shift 删除数组第一项元素
          unshift 往数组前面追加元素
          slice 截取一段数组
          splice 可以删除、替换或增加数组元素
          concat 拼接数组
          includes 判断是否是否包含指定元素，返回布尔值
          indexOf 判断是否是否包含指定元素，返回下标（找到了就是元素下标，没有找到-1）
          join 将数组元素拼接成字符串
          reverse 反转数组
          sort 排序数组
          forEach 遍历数组
          map 遍历数组，返回新数组。长度不变，值变
          filter 过滤数组，返回新数组。长度变，值不变
          reduce 累加、求和、统计
          some 判断数组元素是否有一个满足条件
          every 判断数组元素是否都满足条件
          find 查找满足条件的第一个元素（找到到返回这个元素，没有找到返回undefined）
          findIndex 查找满足条件的第一个元素（找到到返回这个元素下标，没有找到返回-1）
      */
      const persons = [
        { id: 1, name: "华哥" },
        { id: 2, name: "红浪漫" },
        { id: 3, name: "强哥" },
      ];
      // const result = [<li>华哥</li>, <li>红浪漫</li>, <li>强哥</li>];

      // const result = persons.map((person, index) => {
      //   // Warning: Each child in a list should have a unique "key" prop.
      //   // React 要求遍历项元素必须添加key属性，key属性的值要求是唯一的(建议使用id)
      //   // key属性能提升遍历项元素渲染性能
      //   return <li key={person.id}>{person.name}</li>;
      // });

      // const element = <ul>{result}</ul>;

      const element = (
        <ul>
          {persons.map((person, index) => {
            // Warning: Each child in a list should have a unique "key" prop.
            // React 要求遍历项元素必须添加key属性，key属性的值要求是唯一的(建议使用id)
            // key属性能提升遍历项元素渲染性能
            return <li key={person.id}>{person.name}</li>;
          })}
        </ul>
      );

      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
